<template>
  <div class="loginwrap">
    <div class="logo">
      <img
        class="logoImg"
        src="https://img2.baidu.com/it/u=620833131,3260986266&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
        mode="scaleToFill"
      />
    </div>
    <!-- 表单 -->
    <div class="card">
      <div class="row-Input">
        <div class="left-Input">
          <input-box
            :value="formData.telephone"
            :placeholder="'请输入手机号'"
            :on-input="handleInput"
            :label="'手机号'"
            :params-value="'telephone'"
            :width="100"
          ></input-box>
        </div>
        <CountdownButton
          :phone-number="formData.telephone"
          :edit-text="'注册'"
        ></CountdownButton>
      </div>
      <div class="row-Input">
        <div class="left-Input">
          <input-box
            :value="formData.validCode"
            :placeholder="'请输入验证码'"
            :on-input="handleInput"
            :label="'验证码'"
            :params-value="'validCode'"
          ></input-box>
        </div>
      </div>
      <div class="row-Input">
        <div class="left-Input">
          <input-box
            :value="formData.password"
            :placeholder="'请输入登录密码'"
            :on-input="handleInput"
            :label="'密码'"
            :params-value="'password'"
          ></input-box>
        </div>
      </div>
    </div>
    <div class="boxsubmit" @click="handleRegister">注册</div>

    <!-- 第三方协议 -->
    <div class="agree">
      <checkbox-group @change="onChangeCheck">
        <label>
          <checkbox :value="agreeCheckBox" :checked="agreeCheckBox" />
        </label>
      </checkbox-group>
      <div class="agreeBox">
        我同意<span class="xieText">«用户协议»</span>与<span class="xieText"
          >«隐私协议»</span
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import InputBox from '@/components/inputBox/index.vue'

import CountdownButton from '@/components/countdownButton/index.vue'
import { registerMember } from '@/service/login'

const agreeCheckBox = ref<Boolean>(false)
interface ITFormData {
  telephone?: string
  validCode?: string
  password?: string
  deviceId?: string
}

const formData = ref<ITFormData | any>({
  telephone: '',
  validCode: '',
  password: '',
  deviceId: '',
})
const handleInput = (e: any, key: string) => {
  const { value } = e.detail
  formData.value[key] = value
}

// 是否 同意
const onChangeCheck = (e: any) => {
  const state: Boolean = e.detail.value[0] ? Boolean(e.detail.value[0]) : false
  agreeCheckBox.value = state
}
// 点击忘记密码
const getDeviceIdInfo = () => {
  uni.getSystemInfo({
    success: (res) => {
      formData.value.deviceId = res.deviceId
    },
  })
}

const __init = () => {
  getDeviceIdInfo()
}
__init()

const handleRegister = async () => {
  const formValue = formData.value
  if (!agreeCheckBox.value) {
    uni.showModal({
      content: '请确认你已阅读并同意《用户协议》和 《隐私政策》',
      showCancel: false,
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      },
    })
    return false
  }
  if (!formValue.validCode) {
    uni.showToast({
      icon: 'none',
      title: '请输入验证码',
    })
    return false
  }
  if (!formValue.password) {
    uni.showToast({
      icon: 'none',
      title: '请输入密码',
    })
    return false
  }
  const result = await registerMember({
    siteCode: '1721805485310611456',
    confirmPassword: formValue.password,
    ...formValue,
  })
  if (result.code === '200') {
    uni.setStorageSync('userInfoId', res.data)
    uni.reLaunch({
      url: '/pages/index/index',
    })
  }
}
</script>
<style scoped lang="scss">
.loginwrap {
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  .logo {
    // width: calc(100% - 40p);
    height: 200px;
    border-radius: 20px;
    .logoImg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
  .card {
    margin-top: 10px;
    background: #fff;
    padding: 10px 15px 10px 15px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    .row-Input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f1eeee;

      .leftInput {
        // width: 100px;
        height: 40px;
      }
    }
  }
  .boxsubmit {
    width: 100%;
    height: 38px;
    margin-top: 20px;
    background: rgb(56, 156, 253);
    border-radius: 18px;
    text-align: center;
    color: #fff;
    line-height: 38px;
  }
  .appbox {
    display: flex;
    height: 38px;
    margin-top: 10px;
    font-size: 14px;
    color: rgb(56, 156, 253);
    justify-content: space-between;
  }
  .otherlogin {
  }
  .agree {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 14px;
    .agreeBox {
      color: #ccc;
      .xieText {
        color: rgba(26, 186, 241, 1);
      }
    }
  }
}
</style>
